<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <script>
        // ES6 新增了let命令，用来声明变量。
        // 它的用法类似于var，但是所声明的变量，只在let命令所在的代码块内有效
        // 因为没有块级作用域，所以我们在for语句的外面仍然能获取i的值

        // for (var i = 0; i < 10; i++) {   //ES5只有全局作用域和函数作用域，没有块级作用域的概念
        //     console.log(i); // 0-9
        // }
        // console.log(i);     // 10 

        //因为用let声明变量，变量只在块级作用域下有效，所以再for语句之外输出i会报错
        // for (let i = 0; i < 10; i++) {
        //     console.log(i); // 0-9
        // }
        // console.log(i);     // 报错 i is not defined


        // ES6中我们用let来声明变量，const来声明变量和常量
        {
            let a;
            console.log(a) //undefined
            a = 2;          //由此可见，let并不存在变量提升
        }

        // 支持换行 用反引号``
        let str = `hello
            world
            你好啊`
        console.log(str)

        //新版本支持字符串连接功能
        // let year = "2021"
        // let month = "04"
        // let date = "21"
        // result = `${year}年${month}月${date}日`
        // console.log(result) //用法${变量名}，然后用反引号括起来

        // 字符串中嵌入变量
        const student = {
            name: "小明",
            age: 2,
        }               //将变量名写在${}之中
        console.log(`我是${student.name},今年我${student.age}岁了`)


        // 模板字符串调用函数
        let x = "hello";
        let y = "world";
        function fun(x, y) {
            return x + y
        }              //引用函数与上面引用变量类似， ${fun(x,y)}
        console.log(`程序员最常用的一句话是${fun(x, y)}`)


        //解构赋值
        // ES6允许按照一定模式，从数组和对象中提取值，对变量进行赋值，这被称为解构赋值，
        //传统赋值
        var num1 = 1;
        var num2 = 2;
        var num3 = 3;
        console.log(num1, num2, num3)
        //数组的解构赋值
        let [str1, str2, str3] = ["hello", "world", "javascript"];
        console.log(str1, str2, str3);
        //数组的解构赋值，两个数字进行调换
        let [n,m] = [111,2222];
        [n,m]=[m,n];  //此行是关键，意思是n和m值进行调换
        console.log(n,m)

        // 对象的解构赋值
        let { number1, number2, number3 } = {
            number1: 100,
            number2: 200,
            number3: 300,
        }
        console.log(number1, number2, number3)

        // 字符串的结构赋值
        let [a, b, c, d, e] = "hello";
        console.log(a,b,c,d,e);
        // 类似数组的对象都有一个length属性，因此还可以对这个属性解构赋值。
        let { length: len } = 'hello';
        //{length : len} length是长度的意思，len 是 let 声明的一个常量
        console.log(len) //长度为数字的5
  
       
        // 解构赋值 传参  重点记忆，实际项目用的较多
        let xm = {name:"xiaoming",age:10}
        // function getName(obj){
        //     return obj.name
        // }
        // let result = getName(xm);
        // console.log(result)   //以前都是这么写，直观但是麻烦


        function getName( {name} ){  //{}小括号里对象的传参
            return name
        }
        let result = getName(xm);
        console.log(result);
    </script>
</body>

</html>